import React from 'react'

export const themes = {
  light: {
    foreground: '#ffffff',
    background: '#222222',
  },
  dark: {
    foreground: '#000000',
    background: '#eeeeee',
  },
};


const ThemeContext = React.createContext(themes.dark)

function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => <button {...props} 
      style={{backgroundColor: theme.background}}>这是一个按钮</button>}
    </ThemeContext.Consumer>
  )
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton onClick={props.changeTheme}>
        Change Theme
      </ThemedButton>
    </div>
  )
}


export default class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state={theme: themes.dark}
  }

  toggleTheme = () => {
    this.setState(state=>({
      theme: state.theme === themes.dark? themes.light: themes.dark
    }))
  }
  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        <Toolbar changeTheme={this.toggleTheme}/>
      </ThemeContext.Provider>
    )
  }
}